import { createRoot } from 'react-dom/client';
import App from './App';
import { StrictMode } from 'react';
import '@/assets/css/index.css';
import './style.css';
import { waitEleRender } from '@/lib/utils';

export default defineContentScript({
  matches: ['https://www.dianxiaomi.com/web/popTemu/pageList/offline*'],
  async main(ctx) {
    const anchor = await waitEleRender('.toolbar-suffix > div', 5000);
    // console.log(anchor);
    if (!anchor) {
      return;
    }
    const ui = await createIntegratedUi(ctx, {
      position: 'inline',
      anchor,
      append: 'first',
      onMount: (uiContainer) => {
        const app = document.createElement('div');
        uiContainer.append(app);
        const root = createRoot(app);
        root.render(
          <StrictMode>
            <App></App>
          </StrictMode>,
        );
        return root;
      },
      onRemove: (root) => {
        root?.unmount();
      },
    });
    ui.mount();
  },
});
